<template>
  <div class="products">
    <BsSubmenu :subMenus="subMenus" />
    <section class="banner">
      <div class="text-center f24">
        技术支持
      </div>
    </section>

    <section class="section-1">
      <div class="hd">
        <ul class="downlaods">
          <li>
            <div class="header">电脑客户端</div>
            <div class="img">
              <img src="../assets/images/supports/wx0002.png" alt="">
            </div>
          </li>
          <li>
            <div class="header">专用教室客户端</div>
            <div class="img">
              <img src="../assets/images/supports/wx0001.png" alt="">
            </div>
          </li>
          <li>
            <div class="header">APP 安卓端</div>
            <div class="img">
              <img src="../assets/images/supports/wx0003.png" alt="">
            </div>
          </li>
          <li>
            <div class="header">APP IOS端</div>
            <div class="img">
              <img src="../assets/images/supports/wx0004.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import BsSubmenu from '@/components/BsSubmenu'

export default {
  components: {BsSubmenu},
  data (){
    return {
      subMenus: [
        {title: '软件下载', link:'/supports', active: true},
        {title: '售前支持', link:'#', active: false},
        {title: '售后支持', link:'#', active: false},
        {title: '帮助', link:'/supports/help', active: false},
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.banner{
  background: url(../assets/images/supports/bann.png) no-repeat center center;
  height: 210px;
  color: #fff;
  line-height: 210px;
}
.section-1{
  padding: 60px 0;
}
.downlaods{
  overflow: hidden;
  border:1px solid #ebeced;

  li{
    float: left;
    width: 25%;
    text-align: center;
    border-right:1px solid #ebeced;
    height: 400px;
    .header{
      line-height: 40px;
      background: #f7f8f9;
    }
    .img{
      padding-top:60px;
    }
  }
}
</style>
